<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的世界</title>
    <style>
        p{
            color:red;
        }
        body{
            background-image: url(hw2IMG_20221106_171359.jpg);
            background-repeat: no-repeat;
        }
        .foot {
            overflow: hidden;
        }

        div.a img {

            height: 200px;
            width: 2000px;
        }

        ul {
            height: 20px;
        }

        li {
            float: left;
            list-style: none;
        }

        ul li a {
            display: inline-block;
            text-decoration: none;
            padding: 200px;
            padding-top: 0px;
            color: blue;
        }

        ul li a:hover {
            color: brown;
        }

        table {
            border: solid black;
            background-color: pink;
            margin: 100px auto;
            text-align: center;
            height: 50px;
            width: 500px;
            border-collapse: collapse;
        }

        tr:nth-child(2n+1) {
            background-color: blue;
        }

        tr:nth-child(2n) {
            background-color: green;
        }
        div1{
    margin: 10px;
    border: 10px;
    padding: 150px;
    float: left;
  }
        div2{
    margin: 10px;
    border: 10px;
    padding: 150px;
    float: left;
  }
  div3{
    margin: 10px;
    border: 10px;
    padding: 150px;
    float: left;
  }
  div4{
    margin: 10px;
    border: 10px;
    padding: 150px;
    float: left;
  }
  .c1 img{
    
    -webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
    filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
    
  }
  #footer { 
 display: block;
 background-color: blue; 
 clear:both; 
 text-align: center;
 padding: 15px;
 color: #FFFFFF;
 } 
    </style>
</head>

<body>
    <div class="a">
        <img src="hw2IMG_20221106_171359.jpg">
    </div>
    <header>
        <ul class="foot">
            <li><a href="https://user.qzone.qq.com/1669904007/infocenter">空间</a></li>
            <li><a href="新建文件夹">相册</a></li>
            <li><a href="https://www.douyin.com">视频</a></li>
        </ul>
    </header>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>爱好</th>
            <th>性格</th>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>打篮球</td>
            <td>未知</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>打篮球</td>
            <td>未知</td>
        </tr>
        <tr>
            <td>刘二</td>
            <td>男</td>
            <td>打篮球</td>
            <td>未知</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>打篮球</td>
            <td>未知</td>
        </tr>
        <tr>
            <td>猛男</td>
            <td>男</td>
            <td>打篮球</td>
            <td>未知</td>
        </tr>
    </table>
    <div1 class="c1">
        <img src="hw2IMG_20221106_170826_Burst04.jpg"width="350px" height="250px" >
        <p>兄弟和夕阳</p>
    </div1>
    <div2 class="c1">
    <img src="hw2IMG_20221110_175315.jpg" width="350px" height="250px">
    <p>酱菜的夕阳</p>
    </div2>
    <div3 class="c1">
    <img src="hw2mmexport1667726337741.jpg"width="350px" height="250px">
    <p>球队合影</p>
    </div3>
    <div4 clss="c1">
    <img src="1669210619285.jpg"width="350px" height="250px">
    <p>额滴小弟弟</p>
    </div4>
    　<div5 id="footer">兄弟情深</div>
    </div5>
</body>

</html>